<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div v-show="true">{{name}},{{a}}</div>
      <div v-if="a === 1 ">c++</div>
      <div v-else-if="a === 2">java</div>
      <div v-else-if="a === 3">python</div>
      <div v-else>哈哈</div>

      <template v-if="a===3">
        <h2>hello</h2>
        <h2>hello</h2>
        <h2>hello</h2>
      </template>

      <button @click="add()">点我a+1</button>
    </div>
    <!-- 
      条件渲染
        1.v-show
            v-show="表达式，表达式结果为true就显示，为false就不显示"  
            特点:不显示的元素相当于加了display:none
            适用于切换比较频繁的场景
        2.v-if
            v-if="表达式"        
            v-else-if="表达式"
            v-else = "表达式"
            特点:表达式值为false,会把节点都删除掉
            适用于切换频率低的场景

        3.template标签 在显示的时候会去掉   template标签只能跟v-if一起使用
     -->
    <script type="text/javascript">
      Vue.config.productionTip = false
      const vm = new Vue({
        el: '#root',
        data: {
          name: 'hello ,world!!',
          a: 0,
        },
        methods: {
          add() {
            this.a++
          },
        },
      })
    </script>
  </body>
</html>
